<!DOCTYPE html>
<html>
    <head>
        <meta data-n-head="ssr" charset="utf-8">
        <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    </head>
<style>
body {
  margin: 0;
  padding: 0;
}

ul.stacks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-y: hidden;
  /* background-image: url(./ba1.png);
  background-size: 100% auto;
  background-repeat-y: no-repeat; */
  cursor: pointer;
  position:absolute;
  width: 100%;
  left: 0;
  top: 0;
}

ul.stacks li {
  /* background-color: #ccc; */
  flex: 1;
  overflow: hidden;
  position: relative;
}

ul.stacks li::after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  /* background-image: url(https://images.unsplash.com/photo-1536700503339-1e4b06520771?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80); */
  background-image: url(./ba2.png);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}

ul.stacks li {
  transition: 1s transform ease-in-out;
}
ul.stacks li:nth-child(1) {
  transition-delay: calc(1 * 0.06s);
}
ul.stacks li:nth-child(1)::after {
  left: calc(0 * -10vw);
}
ul.stacks li:nth-child(2) {
  transition-delay: calc(2 * 0.06s);
}
ul.stacks li:nth-child(2)::after {
  left: calc(1 * -10vw);
}
ul.stacks li:nth-child(3) {
  transition-delay: calc(3 * 0.06s);
}
ul.stacks li:nth-child(3)::after {
  left: calc(2 * -10vw);
}
ul.stacks li:nth-child(4) {
  transition-delay: calc(4 * 0.06s);
}
ul.stacks li:nth-child(4)::after {
  left: calc(3 * -10vw);
}
ul.stacks li:nth-child(5) {
  transition-delay: calc(5 * 0.06s);
}
ul.stacks li:nth-child(5)::after {
  left: calc(4 * -10vw);
}
ul.stacks li:nth-child(6) {
  transition-delay: calc(6 * 0.06s);
}
ul.stacks li:nth-child(6)::after {
  left: calc(5 * -10vw);
}
ul.stacks li:nth-child(7) {
  transition-delay: calc(7 * 0.06s);
}
ul.stacks li:nth-child(7)::after {
  left: calc(6 * -10vw);
}
ul.stacks li:nth-child(8) {
  transition-delay: calc(8 * 0.06s);
}
ul.stacks li:nth-child(8)::after {
  left: calc(7 * -10vw);
}
ul.stacks li:nth-child(9) {
  transition-delay: calc(9 * 0.06s);
}
ul.stacks li:nth-child(9)::after {
  left: calc(8 * -10vw);
}
ul.stacks li:nth-child(10) {
  transition-delay: calc(10 * 0.06s);
}
ul.stacks li:nth-child(10)::after {
  left: calc(9 * -10vw);
}

ul.stacks:hover li {
  transform: translatey(-100%);
}

.content {
   width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span {
  display: block;
  margin-top: 40px;
}
</style>

<body>
    <div style="height: 100px;background-color:red;width:100%;">
        前置内容
    </div>
    <div class="content">
            <img src="./ba1.png" alt="" style="width:100%;" >
            <ul class="stacks">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </img>
    </div>
</body>

</html>